<script setup lang="ts">
interface Props {
    invitedNumber: number,
    reward: number,
    disable?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    invitedNumber: 0,
    reward: 0,
    disable: true
})

const emit = defineEmits(['inviteClick'])

</script>

<template>
    <div class="total">
        <div class="total-item">
            <span class="total-item_title">Numbers</span>
            <span class="total-item_info">{{ props.invitedNumber || 0 }}</span>
        </div>
        <div class="total-item">
            <span class="total-item_title">Reward</span>
            <div class="total-item-info">
                <img src="@/assets/imgs/flame.png" alt="flame" width="10">
                <span class="total-item-info_reward">{{ props.reward || 0 }}</span>
            </div>
        </div>
        <div class="total-item">
            <div class="total-btn" :class="{ disable: props.disable }" @click="emit('inviteClick')">
                <img src="@/assets/imgs/invited/invited_btn.png" alt="invited_btn" width="150">
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.total {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    width: 100%;
    height: 20vmin;
    padding: 0 2vmin;

    &-btn {
        display: flex;
        width: 30vmin;
        animation: move 500ms linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;

        img {
            width: 100%;
        }

        &.disable {
            pointer-events: none;
            background-color: transparent !important;

            img {
                filter: grayscale(100%);
            }
        }
    }

    &-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 15vmin;

        &:first-child::before {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 0.5vmin;
            height: 10vmin;
            background-color: var(--inviter-main-color);
            border-radius: 999vmin;
        }

        &-info {
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                width: 3vmin;
            }
        }

        span {
            font-size: 4.5vmin;
            text-align: center;
            color: var(--inviter-main-color);
            font-weight: bold;
        }
    }
}
</style>